import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; //第三方包：UI尺寸适配，设置响应式宽高
import 'package:flutter_statusbar_manager/flutter_statusbar_manager.dart'; //第三方包：状态栏管理库
import 'package:flutter_demo/component/text_button.dart';

class HomePage extends StatefulWidget {
  HomePage();

  @override
  createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double statusBarHeight;
  var navList = [
    {
      'title': '推荐', 
      'type': '0'
    },
    {
      'title': '军事', 
      'type': '1'
    },
    {
      'title': '体育', 
      'type': '2'
    },
    {
      'title': '娱乐', 
      'type': '3'
    },
    {
      'title': '奇闻', 
      'type': '4'
    },
    {
      'title': '读报', 
      'type': '5'
    },
    {
      'title': '动漫', 
      'type': '6'
    },
  ];

  var videoList = [
    {
      'title': '纯情女神暄雅', 
      'image': 'https://emyfs.bs2cdn.yy.com/ZWY4NGI2ZjQtMGIwYy00MWU2LTkzMTEtNzdjMmEyOWE0ZjAz.jpg?imageview/4/0/w/363/h/330/blur/1',
      'userCount': '35.8万',
      'roomId': '22490906'
    },
    {
      'title': '百变电眼小酒窝', 
      'image': 'https://emyfs.bs2cdn.yy.com/OWZiMjRkMjAtOGZlMy00OTk1LWFjYzItNGJjNDI2ZjE1Y2M0.jpg?imageview/4/0/w/363/h/330/blur/1',
      'userCount': '1259',
      'roomId': '24318595'
    },
    {
      'title': '会唱会跳的美少女漫漫', 
      'image': 'https://emyfs.bs2cdn.yy.com/NjFlNmE5N2EtODg1Zi00OGY5LTg0YmMtODNlMGFmZDhlMWVm.jpg?imageview/4/0/w/363/h/330/blur/1',
      'userCount': '2298',
      'roomId': '95825545'
    },
    {
      'title': '致命魅惑小MM', 
      'image': 'https://emyfs.bs2cdn.yy.com/MWJlOTE1ODMtMTRlZC00NjM5LThmNTYtNjA3YmFhNzE0YWZl.jpg?imageview/4/0/w/363/h/330/blur/1',
      'userCount': '1797',
      'roomId': '49711414'
    },
  ];

  void _goToDetail(roomId) {
    Navigator.of(context).pushNamed(
      '/detail', 
      arguments: {
        'roomId': roomId
      },
    );
  }

  void _getStatusBarHeight() async {
    statusBarHeight = await FlutterStatusbarManager.getHeight;
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    _getStatusBarHeight();
  }

  @override
  Widget build(BuildContext context) {
    //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

    return Scaffold(
      appBar:  PreferredSize(
        child: AppBar(
          title: new Text(
            '随便直播',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
          ),
          centerTitle: true,
        ),
        preferredSize: Size.fromHeight(ScreenUtil.getInstance().setHeight(100)),
      ),
      body: new Column(
        children: [
          new Container(
            height: ScreenUtil.getInstance().setHeight(80),
            color: Colors.white,
            child: new Row(
              children: [
                new Expanded(
                  flex: 1,
                  child: new ListView(
                    scrollDirection: Axis.horizontal,
                    children: navList.map((item) => 
                      new TextButton(
                        child: new Text(
                          item['title']
                        ),
                        onPressed: () {
                          print(213);
                        }
                      )
                    ).toList(),
                  ),
                ),
              ]
            ),
          ),

          new Container(
            height: statusBarHeight != null ? ScreenUtil.getInstance().setHeight(1154) - statusBarHeight - 1 : 0,
            child: new GridView.count(
              crossAxisCount: 2, //一行多少个
              mainAxisSpacing: 10, //垂直间隔
              crossAxisSpacing: 4, //水平间隔
              padding: const EdgeInsets.all(0),
              childAspectRatio: 1, //宽高比 默认1
              children: videoList.map((item) => 
                new InkWell(
                  onTap: () {
                    _goToDetail(item['roomId']);
                  },
                  child: new Column(
                    children: [
                      new Expanded(
                        flex: 10,
                        child: new Stack(
                          fit: StackFit.expand,
                          alignment: Alignment.center,
                          children: [
                            new Image.network(
                              item['image'],
                              fit: BoxFit.cover,
                            ),
                            new Positioned(
                              left: 0,
                              right: 0,
                              bottom: 0,
                              child: new Container(
                                color: Color(0x40000000),
                                height: ScreenUtil.getInstance().setHeight(60),
                                alignment: Alignment.centerLeft,
                                padding: EdgeInsets.only(left: 5),
                                child: new Row(
                                  children: [
                                    new Icon(
                                      Icons.supervisor_account,
                                      color: Colors.white,
                                      size: 16,
                                    ),
                                    new Text(
                                      ' ' + item['userCount'],
                                      style: new TextStyle(
                                        color: Colors.white,
                                        fontSize: 12,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ]
                        ),
                      ),
                      new Container(
                        height: ScreenUtil.getInstance().setHeight(60),
                        alignment: Alignment.center,
                        child: new Text(item['title']),
                      ),
                    ],
                  ),
                ),
              ).toList(),
            ),
          ),
        ],
      ),
    );
  }
}